import React, { Component } from 'react';
import {
  StyleSheet, View, DeviceEventEmitter, Text,
} from 'react-native';
import produce from 'immer';
import { Accordion } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Theme from '../../../../native-base-theme/variables/commonColor';
import * as techDocService from '../../../../services/techDoc';
import { UtilToast } from '../../../../utils/util-method';
import { SearchBarHeaderImage } from '../../../../components';
import ZlstIcon from '../../../../components/zlst-icons';

class SparePartsInventoryDetail extends Component {
  static navigationOptions = {
    title: '库存详情',
    headerStyle: { backgroundColor: Theme.toolbarDefaultBg, borderBottomWidth: 0, elevation: 0 },
    headerTintColor: '#FFFFFF',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 20,
      flex: 1,
      textAlign: 'center',
    },
    headerBackImage: (
      <ZlstIcon
        name="fanhui"
        size={24}
        color="white"
      />
    ),
    headerRight: <View />,
  }

  constructor(props) {
    super(props);
    this.state = {
      datas: [{ code: '0000000001', name: '电脑备件批发部', num: '11', date: '2018-12-09', price: '2163', num1: '1', kuqu: '东区', kuwei: '2-3-1' }],
    };
  }

  componentDidMount() {
    // this.getDatas();
    const { sparePart, repertory } = this.props.navigation.state.params;
    alert(sparePart + repertory);
  }

  // 获取技术性能信息
  getDatas = async () => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const { datas } = this.props.navigation.state.params;
      if (datas && datas.objType) {
        // const data = await techDocService.tdLubrication({ objType: datas.objType });
        const data = await techDocService.tdLubrication({ objType: 'RX_KYZGSZ' });
        DeviceEventEmitter.emit('showLoading', false);
        if (data && data.length > 0) {
          this.setState(produce(draft => {
            draft.datas = data;
          }));
        } else {
          UtilToast('该设备暂无润滑标准信息', 'danger');
        }
      } else {
        DeviceEventEmitter.emit('showLoading', false);
        UtilToast('没有设备信息', 'danger');
      }
    } catch (e) {
      console.log(e);
      DeviceEventEmitter.emit('showLoading', false);
    }
  }

  _onSearch = async () => {
    this.props.navigation.navigate({
      routeName: 'SearchSpareParts',
    });
  }

  _renderHeader(item, expanded) {
    return (
      <View style={{
        flexDirection: 'row',
        padding: 8,
        marginTop: 8,
        marginLeft: 8,
        marginRight: 8,
        justifyContent: 'space-between',
        borderRadius: 4,
        alignItems: 'center',
        backgroundColor: 'rgba(255,255,255,0.2)',
      }}
      >
        <View style={{ flex: 1, flexDirection: 'column' }}>
          <View style={{ flex: 1, justifyContent: 'center' }}>
            <Text style={{ color: 'white' }}>{item.code}</Text>
          </View>
          <View style={{ flex: 1, justifyContent: 'center' }}>
            <Text style={{ color: 'white' }}>{item.name} ({item.num} 块)</Text>
          </View>
        </View>
        {expanded
          ? <Icon style={{ fontSize: 24, color: 'white' }} name="chevron-up" />
          : <Icon style={{ fontSize: 24, color: 'white' }} name="chevron-down" />}
      </View>
    );
  }

  _renderContent(item) {
    return (
      <View style={{ backgroundColor: Theme.myPrimary, marginLeft: 8, marginRight: 8 }}>
        <Text style={{ padding: 8, color: 'white' }}>
          入库日期：{item.date}
        </Text>
        <Text style={{ padding: 8, color: 'white' }}>
          单价：{item.price} 元
        </Text>
        <Text style={{ padding: 8, color: 'white' }}>
          包装内数量：{item.num1} 块
        </Text>
        <Text style={{ padding: 8, color: 'white' }}>
          库区：{item.kuqu}
        </Text>
        <Text style={{ padding: 8, color: 'white' }}>
          库位：{item.kuwei}
        </Text>
      </View>
    );
  }

  render() {
    const { datas } = this.props.navigation.state.params;
    return (
      <View style={styles.tabContent}>
        <SearchBarHeaderImage placeholder="备件名称" search={this._onSearch} />
        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 8 }}>
          <Text style={{ color: 'white', fontSize: 15, flex: 1 }}>备件名称</Text>
          <Text style={{ color: 'white', fontSize: 15, flex: 1 }}>Inter酷睿I7</Text>
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 8 }}>
          <Text style={{ color: 'white', fontSize: 15, flex: 1 }}>仓库名称</Text>
          <Text style={{ color: 'white', fontSize: 15, flex: 1 }}>备品备件库</Text>
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 8 }}>
          <Text style={{ color: 'white', fontSize: 15, flex: 1 }}>库存数量</Text>
          <Text style={{ color: 'white', fontSize: 15, flex: 1 }}>17</Text>
        </View>
        {/* {this.state.datas.length > 0 && (
          <View>
            <Text style={{ color: 'white', paddingTop: 8, paddingBottom: 8, paddingLeft: 8, fontSize: 15 }}>备品批次</Text>
          </View>
        )} */}
        {this.state.datas.length > 0 && (
          <Accordion
            style={{ borderWidth: 0 }}
            dataArray={this.state.datas}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContent: {
    backgroundColor: Theme.myPrimary,
    width: '100%',
    height: '100%',
    padding: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  descriptionContainer: {
    flexDirection: 'row',
    paddingRight: 50,
  },
  textDescription: {
    color: '#ffffff',
  },
  _button: {
    width: 48,
    borderRadius: 2,
    textAlignVertical: 'center',
    padding: 4,
    color: 'white',
    textAlign: 'center',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'white',
  },
});

export default SparePartsInventoryDetail;
